<template>
  <div class="skyLine">
    <div class="skyLine-top">
      <span>
        天际线分析
      </span>
      <el-popover
          class="skyLine-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中选择视点位置，再次点击鼠标左键选择分析方向即可">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="skyLine-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="skyLine-data">
      <el-form ref="skyLineData" :model="skyLineObj" label-width="170px">
        <el-form-item label="显示场景轮廓线">
          <el-switch v-model="skyLineObj.showOutline"></el-switch>
        </el-form-item>
        <el-form-item label="场景轮廓线宽度">
          <el-input-number :disabled='!skyLineObj.showOutline' v-model="skyLineObj.outlineThickness" :step="1"
                           :max="100" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="场景轮廓线颜色" class="color">
          <el-color-picker :disabled='!skyLineObj.showOutline' color-format="rgb"
                           v-model="skyLineObj.outlineColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="是否自定义场景颜色">
          <el-switch v-model="skyLineObj.useSceneColor"></el-switch>
        </el-form-item>
        <el-form-item label="设置场景颜色" class="color">
          <el-color-picker :disabled='!skyLineObj.useSceneColor' color-format="rgb"
                           v-model="skyLineObj.sceneColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="是否显示天际线窗口">
          <el-switch v-model="skyLineObj.showSkyline"></el-switch>
        </el-form-item>
        <el-form-item label="是否开启交互锁定">
          <el-switch v-model="skyLineObj.interactiveLock"></el-switch>
        </el-form-item>
        <el-form-item label="天际线窗口大小">
          <el-input-number v-model="skyLineObj.windowSize[0]" :step="10" :max="800" :min="100"></el-input-number>
          <el-input-number v-model="skyLineObj.windowSize[1]" :step="10" :max="400" :min="50"></el-input-number>
        </el-form-item>
        <el-form-item label="天际线颜色" class="color">
          <el-color-picker :disabled='!skyLineObj.showSkyline' color-format="rgb"
                           v-model="skyLineObj.skylineColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="天际线窗口背景颜色" class="color">
          <el-color-picker color-format="rgb" v-model="skyLineObj.backgroundColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="视点高度">
          <el-input-number v-model="skyLineObj.height" :step="1" :max="100" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="skyLine-btn">
      <el-button @click="selectSkyLine()">选择区域</el-button>
      <el-button @click="delSkyLine()">删除</el-button>
      <el-button @click="closeSkyLine()">关闭</el-button>
      <el-button @click="saveSkyLine()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/skyLine';
</style>
<script>
/* eslint-disable */

export default {
  name: "skyLine",
  data() {
    return {
      skyLineObj: {
        //是否显示场景轮廓线，默认值：true
        showOutline: true,
        //场景轮廓线像素宽度 (仅显示场景轮廓线有效)，默认值：1
        outlineThickness: 3.0,
        //场景轮廓线颜色 (仅显示场景轮廓线有效)，默认值：绿色 Color.Green
        outlineColor: 'rgb(220,20,60)',
        //是否使用自定义场景颜色，默认值：false
        useSceneColor: false,
        //设置场景颜色 (仅使用自定义场景颜色有效)，默认值：黑色 Color.Black
        sceneColor: 'rgb(0,0,0)',
        //是否显示天际线窗口，默认值：true
        showSkyline: true,
        //是否开启交互锁定，默认值：true
        interactiveLock: true,
        //天际线窗口大小 0:X 1:Y
        windowSize: [800, 400],
        //天际线颜色(仅显示天际线窗口有效)，默认值：绿色 Color.Green
        skylineColor: 'rgb(0,255,127)',
        //天际线窗口背景颜色：默认值：[0,0,0,0.75]
        backgroundColor: 'rgb(112,128,144)',
        //视点高度（距离场景交互所拾取点的高度），默认值：0
        height: 30,
        //数组类型，若此数组为空默认绘制所有物体形成的天际线;不为空则多个TileLayer形成的一条天际线，多条天际线绘制到该图上；
        tileLayers: [],
      },
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectSkyLine() {
      let outlineColor = this.extractRGBComponents(this.skyLineObj.outlineColor)
      let sceneColor = this.extractRGBComponents(this.skyLineObj.sceneColor)
      let skylineColor = this.extractRGBComponents(this.skyLineObj.skylineColor)
      let backgroundColor = this.extractRGBComponents(this.skyLineObj.backgroundColor)
      let obj = {
        showOutline: this.skyLineObj.showOutline,
        outlineThickness: this.skyLineObj.outlineThickness,
        outlineColor: outlineColor,
        useSceneColor: this.skyLineObj.useSceneColor,
        sceneColor: sceneColor,
        showSkyline: this.skyLineObj.showSkyline,
        interactiveLock: this.skyLineObj.interactiveLock,
        windowSize: this.skyLineObj.windowSize,
        skylineColor: skylineColor,
        backgroundColor: backgroundColor,
        height: this.skyLineObj.height,
        tileLayers: [],
      }
      __g.tools.startSkylineAnalysis(obj);
    },
    delSkyLine() {
      __g.tools.stopSkylineAnalysis();
    },
    closeSkyLine() {
      this.$emit('close-popup');
      this.reloadSkyLine()
    },
    reloadSkyLine() {
      this.sunshineObj = {
        showOutline: true,
        outlineThickness: 3.0,
        outlineColor: 'rgb(220,20,60)',
        useSceneColor: false,
        sceneColor: 'rgb(0,0,0)',
        showSkyline: true,
        interactiveLock: true,
        windowSize: [800, 400],
        skylineColor: 'rgb(0,255,127)',
        backgroundColor: 'rgb(112,128,144)',
        height: 30,
        tileLayers: [],
      }
    },
    saveSkyLine() {
      this.$message.success("开发中")
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadSkyLine()
  },
};
</script>